import React, { useState, useEffect } from 'react'
import { Tabs, Space, Tag, Switch, message } from 'antd';
import axios from 'axios';
import {
  ArrowLeftOutlined
} from '@ant-design/icons';
import ProductManage from './ProductManage';
import OrderManage from './OrderManage';
import ProductStateManage from './ProductStateManage';
export default function ProductManageStep() {
  const [open, setOpen] = useState(true);
  const [openBtn, setOpenBtn] = useState(false);
  const [messageApi, contextHolder] = message.useMessage();
  const items = [
    {
      key: '1',
      label: `生产订单管理`,
      children:
        <OrderManage />
    },
    {
      key: '2',
      label: `生产状态`,
      children:
        <ProductStateManage />
    }
  ];
  useEffect(() => {
    getData()
    const intervalID = setInterval(function () {
      getData()
    }, 1000);
    return () => {
      // 清除setInterval
      clearInterval(intervalID);
    };

  }, [])
  const getData = () => {
    axios.get("/app/selectstate").then(res => {
      for (var i = 0; i < res.data.length; i++) {
        if (res.data[i].appname === "生产管理") {
          res.data[i].appstate === 0 ? setOpen(true) : setOpen(false)
          res.data[i].appstate === 0 ? setOpenBtn(true) : setOpenBtn(false)
        }
      }
    })
  }

  const isOpen = (checked) => {
    if (checked) {
      messageApi.info("正在启动")
      setOpenBtn(checked)
      axios.get("/app/selectstate").then(res => {
        if (res.data[1].appfault === 1) {
          messageApi.open({
            type: 'error',
            content: '启动失败',
          });
        } else {
          axios.post("/app/updatestate", { id: "2", appname: "生产管理", appstate: 0 }).then(res => {
            setTimeout(function () {
              if (res.data) {
                messageApi.open({
                  type: 'success',
                  content: '启动完成',
                });
                setOpen(checked)
                //window.location.reload()
              }
            }, 2000);
          })
        }
      })

    } else {
      setOpenBtn(checked)
      setOpen(checked)
      axios.post("/app/updatestate", { id: "2", appname: "生产管理", appstate: 1 }).then(res => {
        if (res.data) {
          setOpen(checked)
          messageApi.open({
            type: 'success',
            content: '关闭成功',
          });
        }
      })
    }
  }
  return (
    <div style={{
      minHeight: document.documentElement.clientHeight - 30,

    }}>
      {contextHolder}
      <div style={{ height: "60px", background: "white", lineHeight: "60px", padding: "0 20px", color: "black" }}>
        <Space>
          <a style={{ fontSize: "12px", color: "black" }} onClick={() => { window.history.go(-1) }}><ArrowLeftOutlined />返回</a>
          <div style={{ margin: "0 0 0 100px" }}>
            服务状态：<Tag color={open ? "green" : "red"}
              style={{ width: "80px", height: "24px", textAlign: 'center', borderRadius: "0px", border: "soild 0px black", color: open ? "green" : "red" }}>
              {open ? "启动" : "停止"}</Tag>
          </div>
          <div style={{ margin: "0 0 0 20px" }}>
            服务：<Switch checkedChildren="开启" unCheckedChildren="关闭" checked={openBtn} onChange={(checked, event) => { isOpen(checked) }} />
          </div>

        </Space>
      </div>

      <Tabs defaultActiveKey="1" items={items}
        tabBarStyle={{ padding: "5px 20px", }}
        style={{ fontSize: "12px", margin: "20px 0 0 0", background: "white", minHeight: document.documentElement.clientHeight - 110, display: open ? "block" : "none" }}
      />
    </div>
  )
}
